<template>
    <div style="display: flex">
        <!--收缩、隐藏-->
        <div style="flex: 1; font-size: 20px">        <!--手指-->
            <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
            <!--面包屑-->
            <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px" >
                <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
            </el-breadcrumb>

        </div>


        <!--主体头部菜单-->
        <el-dropdown style="width: 150px; cursor: pointer; text-align: right">
            <!--个人信息-->
            <div style="display: inline-block; ">
                <img :src="user.avatarUrl" alt=""
                     style="width: 30px;height: 40px; border-radius: 50%; position: relative; top: 10px; right: 5px">
                <span>{{ user.nickname }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
            </div>
            <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
                <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                    <el-link href="/person" type="primary" >个人信息</el-link>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                    <el-link href="/password" type="success">修改密码</el-link>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                    <el-link type="danger" @click="logout">退出</el-link>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

    </div>



</template>

<script>
    export default {
        name: "Header",
        props: {
            //按钮样式
            collapseBtnClass: String,
            //收缩方法
            collapse: Function,
            //用户
            user: Object,

        },


        data() {
            return {
                // user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
            }
        },


        //计算机属性，使用vuex的数据
        computed: {
            currentPathName () {
                return this.$store.state.currentPathName;　　//需要监听的数据
            }
        },
        //监听器，监听数据变化，执行赋值等相关操作
        watch: {
            currentPathName (newVal, oldVal) {
                console.log(newVal)
            }
        },
        methods:{
            logout() {
                this.$router.push("/login")
                localStorage.removeItem("user")
                this.$message.success("退出成功")
            }
        },
    }
</script>

<style scoped>
    /deep/ .el-breadcrumb__separator {
        color: #0d0808 !important;
    }

</style>
